<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getDetailApi } from '@/api/asset/car-repair'
  import Projects from './components/projects.vue'

  const initFold1 = ref(true)
  const repairId = ref() //维修单id
  const main = ref<any>({}) //维修详情

  const getDetail = async (mainId) => {
    const res = await getDetailApi({ id: mainId })
    main.value = res.result
  }
  onLoad((options) => {
    repairId.value = options.id
    if (repairId.value) {
      getDetail(repairId.value)
    }
  })
</script>

<template>
  <view class="viewports">
    <view class="car-info-content" v-if="main">
      <view>{{ main.licenseNo || '-' }}</view>
      <view>{{ main.modelName || '-' }}</view>
    </view>
    <ve-card style="margin-top: 24rpx" v-if="main">
      <ve-cell label="车辆当前归属门店">{{ main.carSiteName || '-' }}</ve-cell>
      <ve-cell label="归属车场">{{ main.libraryName || '-' }}</ve-cell>
      <ve-cell label="车架号">{{ main.vin || '-' }}</ve-cell>
      <ve-cell label="维修单号">{{ main.repairNo || '-' }}</ve-cell>
      <ve-cell label="维修状态">{{ main.statusStr || '-' }}</ve-cell>
    </ve-card>
    <ve-card title="维修单信息" type="none" :fold="true" style="margin-top: 0" v-if="main" v-model:initFold="initFold1">
      <ve-cell label="维修单关联门店">{{ main.siteName || '-' }}</ve-cell>
      <ve-cell label="入厂时间">{{ main.arrivalTime || '-' }}</ve-cell>
      <ve-cell label="出厂时间">{{ main.leaveTime || '-' }}</ve-cell>
      <ve-cell label="修理厂">{{ main.repairShop || '-' }}</ve-cell>
      <ve-cell label="关联订单号">
        <view>
          {{ main.orderNo || '-' }}
          <view class="line-ellipsis" v-if="main.giveStaffName" style="width: 400rpx">交车人：{{ main.giveStaffName }}</view>
        </view>
      </ve-cell>
      <ve-cell label="承租人信息">
        <div>
          <template v-if="main.memberName && main.memberPhone"> {{ main.memberName }} | {{ main.memberPhone }} </template>
          <template v-else>-</template>
        </div>
      </ve-cell>
      <ve-cell label="入厂里程">{{ main.entranceKilometre || '-' }} 公里</ve-cell>
      <ve-cell label="出厂里程">{{ main.exportKilometre || '-' }} 公里</ve-cell>
      <ve-cell label="负责人">{{ main.undertaker || '-' }}</ve-cell>
      <ve-cell label="备注">{{ main.remark || '-' }}</ve-cell>
      <ve-cell label="上传照片" layout="vertical">
        <ve-upload disabled v-model="main.fileIdList"></ve-upload>
      </ve-cell>
      <ve-cell label="维修内容" :layout="main.detailList && main.detailList.length ? 'vertical' : 'horizontal'">
        <Projects v-if="main.detailList && main.detailList.length" :record="main" />
        <text v-else>-</text>
      </ve-cell>
    </ve-card>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background: #f7f8fa;
  }
  .viewports {
    padding: 24rpx;
    background: #f7f8fa;
    height: 100vh;
  }

  .car-info-content {
    height: 168rpx;
    background-image: url('../../../../static/images/carinfo-bc.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: self-start;
    justify-content: center;
    padding-left: 32rpx;
    color: #ffffff;
    font-family: PingFang SC-Regular, PingFang SC;

    view:nth-of-type(1) {
      font-size: 40rpx;
      font-weight: 600;
      margin-bottom: 4rpx;
    }
    view:nth-of-type(2) {
      margin-top: 4rpx;
      font-size: 28rpx;
      font-weight: 400;
    }
  }
  :deep(.ve-cell-title) {
    width: 240rpx;
    max-width: 240rpx;
  }
</style>
